<script setup>
import {
  Menu as IconMenu,
  Setting,
  DArrowLeft
} from '@element-plus/icons-vue'

import {userInfoService} from "@/api/user.js";
import {useTokenStore} from '@/stores/token.js';
import {useUserInfoStore} from "@/stores/userInfo.js";
import router from "@/router/index.js";
import {ElMessage, ElMessageBox} from "element-plus";

const tokenStore = useTokenStore()
const userInfoStore = useUserInfoStore()

// 用户信息存储在store中
const getUserInfo = async () => {
  const result = await userInfoService()
  userInfoStore.setUserInfo(result.data)
}

getUserInfo()

// 注销
const exit = () => {
  // 删除store中的信息
  ElMessageBox.confirm('确认退出登录吗?', '温馨提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    tokenStore.removeToken()
    userInfoStore.removeUserInfo()
    ElMessage.success('退出登录成功')
    router.push('/login')
  }).catch(() => {
    ElMessage.info('取消退出登录')
  })
}
</script>

<template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <img class="el-header__logo" alt="" src="@/assets/logo.png"/>
      </el-header>
      <el-container>
        <el-aside width="200px">

          <el-menu
              active-text-color="#ffd04b"
              background-color="#545c64"
              class="el-menu-vertical-demo"
              default-active="2"
              text-color="#fff"
              router
          >
            <el-menu-item index="/home/todo">
              <el-icon>
                <icon-menu/>
              </el-icon>
              <span>List Board</span>
            </el-menu-item>
            <el-menu-item index="/home/setting">
              <el-icon>
                <setting/>
              </el-icon>
              <span>Setting</span>
            </el-menu-item>
          </el-menu>

          <el-menu
              active-text-color="#ffd04b"
              background-color="#545c64"
              class="el-menu-vertical-demo"
              default-active="1"
              text-color="#fff"
          >
            <el-menu-item @click="exit">
              <el-icon>
                <d-arrow-left/>
              </el-icon>
              <span>exit</span>
            </el-menu-item>
          </el-menu>
        </el-aside>
        <el-main>
          <router-view/>
        </el-main>
      </el-container>
    </el-container>
  </div>

</template>

<style lang="scss" scoped>
.common-layout {
  height: 100vh;
  background-color: #fff;

  .el-header {
    height: 100%;
    background-color: #232323;
    padding: 10px 20px;
  }

  .el-aside {
    background: #232323;
    height: calc(100vh - 80px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
}
</style>